<script setup lang="ts">
import { reactive, ref } from 'vue'
import { FormType } from '../package/types/form.type'

const model = reactive({
  username: '',
  password: '',
})

const rules = reactive({
  username: [
    {
      required: true,
      message: '请输入用户名',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
    },
  ],
})

const myForm = ref<FormType>()

const login = () => {
  myForm.value?.validator((isValid) => {
    if (isValid) {
      console.log(model)
    } else {
      alert('请正确填写表单！')
    }
  })
}

const show = ref(false)

const beforeClose = (hide: () => void) => {
  hide()
}

const close = () => {}
</script>

<template>
  <div>
    <SForm :model="model" :rules="rules" ref="myForm">
      <SFormItem label="username" prop="username">
        <SInput v-model="model.username" />
      </SFormItem>
      <SFormItem label="password" prop="password">
        <SInput v-model="model.password" />
      </SFormItem>
      <SButton @click="login" type="primary">login</SButton>
    </SForm>
    <SDialog @close="close" :beforeClose="beforeClose" v-model:visible="show">
      <template #body> OK了! </template>
      <template #footer>
        <SButton @click="close">取消</SButton>
        <SButton style="margin-left: 10px" type="primary" @click="close"
          >确定</SButton
        >
      </template>
    </SDialog>
    <SButton type="primary" @click="show = true">{{
      show ? '关闭' : '弹出'
    }}</SButton>

    <SCheckbox></SCheckbox>
  </div>
</template>

<style scoped></style>
